<template>
  <div class="race-page">
    <!-- <el-card class="btn">
      <el-button
        type="primary"
        @click="() => this.$router.go(-1)"
        icon="el-icon-arrow-left"
      >
        返回
      </el-button>
      <el-button
        type="primary"
        @click="nextRound"
        icon="el-icon-arrow-right"
        style="float: right"
      >
        {{ this.nextText }}
      </el-button>
    </el-card> -->
    <div class="header">
      <span>{{ title }}</span>
      <el-button @click="nextRound" icon="el-icon-refresh" style="float: right">
      </el-button>
    </div>

    <el-divider />

    <div v-if="isVideo">
      <div v-if="isVideo">
        <div class="video-text">{{ videosName[currentRound] }}</div>
      </div>
      <!-- 视频播放区域 -->
      <div v-if="isVideo" class="video-container">
        <!-- Video.js 视频播放器 -->
        <video
          height="360"
          width="640"
          ref="videoPlayer"
          id="videoPlayer"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
        ></video>
      </div>
    </div>

    <div class="awent" v-if="!isVideo">
      <div>
        <el-row :gutter="50" style="width: 100%">
          <el-col :span="12">
            <div
              class="tm-awent"
              v-for="(item, index) in awentArr"
              :key="index"
              @click="showQuestionDetail(item)"
            >
              <div class="tm-text">问题{{ index + 1 }}:{{ item.content }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="tm-awent"
              v-for="(item, index) in awentArr1"
              :key="index"
              @click="showQuestionDetail(item)"
            >
              <div class="tm-text">问题{{ item.id }}:{{ item.content }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="btn-next">
      <el-button @click="() => this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button
        @click="() => this.$router.push({ name: 'QuickRequired' })"
        icon="el-icon-arrow-right"
        style="float: right"
      >
      </el-button>
    </div>

    <!-- 添加问题详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="60%" center>
      <div class="question-content">
        <div class="question-item">
          <p>{{ currentQuestion.content }}</p>
        </div>
        <div class="question-item">
          <p>
            问题解析：<span>{{ currentQuestion.analysis }}</span>
          </p>
          <!-- <p>{{ currentQuestion.analysis }}</p> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

export default {
  name: "SafetyRace",
  data() {
    return {
      currentVideoSrc: "school.mp4",
      player: null,
      videos: ["school.mp4", "KTV.mp4"], // 视频列表
      videosName: ["校园安全检查", "娱乐场所检查"],
      currentRound: 0,
      nextText: "下一题",
      isVideo: true,
      title: "火眼金睛",

      awentArr: [
        {
          id: 1,
          content: "校门口未设置硬质防冲撞设施。",
          analysis: "根据《中小学、幼儿园安全防范要求》GB/T 29315-2022，学校大门外应设置拒马、隔离墩和/或升降柱等硬质防冲撞设施。",
        },
        {
          id: 2,
          content: "保安员配备数量不达标。",
          analysis: "根据《中小学幼儿园安全工作规范（试行）》关于学校保安员配备数量的要求，该校应当至少配备3名保安员。",
        },
        { id: 3, content: "学校视频监控录像存储时间不达标。",analysis:"根据《中小学幼儿园安全工作规范（试行）》，学校各部位的监控视频应不间断进行图像采集，保存时间应不少于30天。"},
        { id: 4, content: "巡查次数不达标。" ,analysis:"根据《中小学幼儿园安全工作规范（试行）》，对学校重点部位及周边巡查每日不少于5次。"},
        { id: 5, content: "护卫器械配备不到位。",analysis:"根据《中小学、幼儿园安全防范要求》GB/T 29315-2022，保安员应配备对讲机、防暴头盔、防护盾牌、防刺背心、防割手套、橡胶棒、强光手电、钢叉等护卫器械。" },
        { id: 6, content: "实体防护屏障高度不达标。",analysis:"根据《中小学、幼儿园安全防范要求》GB/T 29315-2022，学校周界应设置围墙、金属栅栏等实体防护屏障，实体防护屏障的外侧整体高度（含滚刺网等防攀爬设施）应不少于2米。" },
      ],
      awentArr1: [
        {
          id: 7,
          content: "宿舍管理员配备不合理。",
          analysis: "根据《中小学幼儿园安全工作规范（试行）》，女生宿舍楼宿舍管理员必须为女性。",
        },
        {
          id: 8,
          content: "档案室出入门材质不合规。",
          analysis: "根据《中小学幼儿园安全工作规范（试行）》，档案室等保密资料存放点的出入口应当安装防盗安全门。",
        },
        { id: 9, content: "安保责任制度建设不符合要求。",analysis:"根据《中小学幼儿园安全工作规范（试行）》，校长是学校内部安全保卫工作第一责任人。" },
        { id: 10, content: "学校未对除正式教职工外的其他在校工作人员开展背景审查。",analysis:"根据《2024年全国中小学幼儿园“护校安园”专项行动方案》，除了入职时需要开展背景审查，每年对所有教职工都要开展一次，且除了正式教职工，施工人员、临聘人员、食堂工作人员等在校工作人员均要开展背景审查。" },
        { id: 11, content: "学校学生欺凌治理委员会组成结构不合规。",analysis:"根据《学生欺凌防范处置工作指引（试行）》，学校学生欺凌治理委员会组成人员还应当有家长代表、社区工作者、校外专家等，不能变成学校一言堂。" },
        { id: 12, content: "对情节恶劣的严重欺凌事件处置方式不符合要求。",analysis:"根据《学生欺凌防范处置工作指引（试行）》，对情节比较恶劣的严重欺凌事件，学校应及时向公安机关、教育行政部门报告，应邀请公安机关参与警示教育或予以训诫，并应当向教育部门提出申请，依照法定程序将实施欺凌学生送入专门学校接受专门教育。" },
      ],

      awentArr2: [
        { id: 1, content: "该娱乐场所无娱乐经营许可证。",analysis:"根据国务院《娱乐场所管理条例》规定，娱乐场所申请从事娱乐经营活动，应当向所在地县级人民政府文化主管部门提出申请并经批准后颁发《娱乐经营许可证》。" },
        { id: 2, content: "该娱乐场所未在规定时间内进行备案。",analysis:"根据公安部《娱乐场所治安管理办法》规定，娱乐场所取得营业执照后，应当在15日内向所在地县（市）公安局、城市公安分局治安部门备案。" },
        { id: 3, content: "保安员着装不规范。",analysis:"根据公安部《娱乐场所治安管理办法》规定，在娱乐场所执勤的保安员应当着统一制式服装，佩戴徽章、标记。" },
        { id: 4, content: "保安员招录不符合要求。",analysis:"根据公安部《娱乐场所治安管理办法》规定，娱乐场所不得自行招录人员从事保安工作。" },
        { id: 5, content: "安全巡查次数不达标。",analysis:"根据公安部《娱乐场所治安管理办法》规定，娱乐场所应当安排专职保安人员负责安全巡查，营业时间内每2小时巡查一次。" },
      ],
      awentArr4: [
        { id: 6, content: "营业时间不合规。",analysis:"根据《娱乐场所管理条例》规定，娱乐场所每日凌晨2时至上午8时期间不得营业。" },
        { id: 7, content: "包厢门安装了门锁。" ,analysis:"根据公安部《娱乐场所治安管理办法》规定，歌舞娱乐场所包厢、包间内不得安装门锁、插销等阻碍他人自由进出包厢、包间的装置。"},
        { id: 8, content: "包厢门镜被遮挡。" ,analysis:"根据公安部《娱乐场所治安管理办法》规定，歌舞娱乐场所在营业期间，包厢、包间门窗透明部分不得遮拦。"},
        { id: 9, content: "该娱乐场所违规接待未成年人。",analysis:"根据国务院《娱乐场所管理条例》规定，歌舞娱乐场所不得接纳未成年人。" },
        { id: 10, content: "警示标志未注明公安机关举报电话。",analysis:"根据公安部《娱乐场所治安管理办法》规定，娱乐场所应当在包厢内的显著位置悬挂含有禁毒、禁赌、禁止卖淫嫖娼等内容的警示标志，标志应当注明公安机关的举报电话。" },
      ],
      dialogVisible: false,
      currentQuestion: {},
    };
  },
  created() {
    this.initVideo();
    // 添加键盘事件监听
    window.addEventListener("keydown", this.handleKeyPress);
  },
  mounted() {
    // // 初始化 Video.js 播放器
    // this.player = videojs(this.$refs.videoPlayer, {
    //   autoplay: false,
    //   controls: true,
    //   fluid: true,
    //   preload: "auto",
    //   sources: [{ src: this.currentVideoSrc, type: "video/mp4" }],
    // });

    // // 监听全屏变化事件
    // this.player.on("fullscreenchange", this.handleFullscreenChange);
    this.initVideo();
  },
  methods: {
    // 初始化视频播放器
    initVideo() {
      // 如果已经初始化则切换地址
      if (this.player) {
        this.player.src([
          {
            type: "video/mp4",
            src: this.currentVideoSrc,
          },
        ]);
        this.player.play();
        return;
      }

      // 确保 DOM 已渲染
      this.$nextTick(() => {
        const videoElement = this.$refs["videoPlayer"];
        if (!videoElement) {
          console.error("视频元素未找到！");
          return;
        }

        // 初始化播放器
        this.player = videojs(videoElement, {
          sources: [
            {
              src: this.currentVideoSrc,
              type: "video/mp4",
            },
          ],
          html5: {
            hls: {
              hlsjsConfig: {},
            },
          },
        });

        // 确保播放器准备好后播放
        this.player.ready(() => {
          console.log("播放器已准备好，开始播放");
          this.player.play();
        });

        // 监听播放事件，进入全屏
        this.player.on("play", () => {
          console.log("视频开始播放，尝试全屏");

          const videoContainer = this.$refs["videoPlayer"].parentNode; // 获取视频容器
          if (videoContainer && videoContainer.requestFullscreen) {
            videoContainer.requestFullscreen().catch((err) => {
              console.error("全屏失败：", err);
            });
          } else if (videoContainer && videoContainer.webkitRequestFullscreen) {
            videoContainer.webkitRequestFullscreen(); // Safari
          } else if (videoContainer && videoContainer.msRequestFullscreen) {
            videoContainer.msRequestFullscreen(); // IE11
          } else {
            console.warn("当前浏览器不支持全屏 API");
          }
        });

        // 监听加载事件
        this.player.on("loadeddata", () => {
          console.log("视频加载完成");
        });
      });
    },

    // 点击视频时切换全屏
    handleVideoClick() {
      const videoElement = this.$refs.videoPlayer;

      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen(); // 请求全屏
      } else if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen(); // Firefox
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullscreen(); // Chrome, Safari & Opera
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen(); // IE/Edge
      }
    },

    // 全屏状态变化时触发
    handleFullscreenChange() {
      const videoElement = this.$refs.videoPlayer;
      if (document.fullscreenElement === videoElement) {
        console.log("进入全屏模式");
      } else {
        console.log("退出全屏模式");
      }
    },

    // 点击下一题切换视频
    nextRound() {
      // 如果文本是 "进入加赛"，则路由跳转
      if (this.nextText === "进入加赛") {
        this.$router.push({ name: "FenceOff" }); // 跳转到加赛页面（请根据你的路由设置修改路径）
        return;
      }

      // 切换视频
      this.currentRound++;

      if (this.currentRound >= this.videos.length) {
        // this.currentRound = 0; // 如果超过视频数组长度，重置为第一个视频
        // this.nextText = "进入加赛"; // 显示"进入加赛"
        // this.$message.warning("当前是最后一题！");
        // return;
        // this.isVideo = false
      } else {
        this.nextText = "下一题"; // 显示"下一题"
      }
      if (this.currentRound == 2) {
        this.isVideo = false;
        this.title = "校园安全检查——答案解析";
      }
      if (this.currentRound > 2) {
        this.title = "娱乐场所检查——答案解析";
        this.awentArr = this.awentArr2;
        this.awentArr1 = this.awentArr4;
      }

      // console.log(this.isVideo);

      console.log(this.currentRound);
      if (this.currentRound < 2) {
        // console.log(this.currentRound);
        this.initVideo();
        // 更新当前视频源
        this.currentVideoSrc = this.videos[this.currentRound];

        // 使用 Video.js 播放新的视频
        this.player.src({ src: this.currentVideoSrc, type: "video/mp4" });
        this.player.load(); // 重新加载视频
        this.player.play(); // 播放新的视频
      }
    },

    // 处理空格键播放/暂停
    handleKeyPress(event) {
      if (event.code === "Space" && this.player && this.isVideo) {
        event.preventDefault(); // 阻止空格键的默认行为
        if (this.player.paused()) {
          this.player.play();
        } else {
          this.player.pause();
        }
      }
    },

    // 显示问题详情
    showQuestionDetail(question) {
      this.currentQuestion = question;
      this.dialogVisible = true;
    },
  },
  beforeDestroy() {
    // 移除键盘事件监听
    window.removeEventListener("keydown", this.handleKeyPress);
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style scoped>
.race-page {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;

  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 36px;
}

.header .el-button {
  position: absolute;
  right: 20px;
  opacity: 0.3;
}

.header span {
  font-size: 36px; /* 增大字体 */
  font-weight: 800; /* 加粗 */
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影 */
  letter-spacing: 2px; /* 增加字间距 */
}

.role-select {
  margin-bottom: 20px;
}

.video-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: rgb(252, 192, 113);
  font-weight: bold;
}

.video-container {
  margin: 180px auto;
  /* max-width: 800px; */
  width: 100%;
  height: auto;
  text-align: center;
  border-radius: 20px;
}

.video-container video {
  /* width: 100%; */
  /* max-height: 450px; */
}

.awent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  font-size: 40px;
}

.awent .el-card {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.el-card .el-row {
  width: 100%;
}

.tm-awent {
  width: 100%;
  margin: 40px;
  text-align: justify;

}

.tm-awent .el-button {
  font-size: 40px;
  margin: 20px 60px;
  padding: 20px;
}

.tm-awent .tm-text {
  width: 100%;
  color: #ebeef5;
}

.btn {
  width: 100%;
}

.admin-panel,
.student-panel {
  margin: 20px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.round-info,
.hazard-info,
.time-limit-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;
}

.answer-form {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.student-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;
}

.start-button,
.answer-button {
  display: block;
  width: 100%;
  margin-top: 20px;
}

.winner-info {
  margin-top: 20px;
}

.info-alert,
.result-alert {
  margin-top: 20px;
}

.timer {
  margin-top: 20px;
  text-align: center;
  font-size: 24px;
  color: #f56c6c;
}

.btn-next {
  width: 97.6%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
  z-index: 1;
}

/* // 添加问题详情对话框样式 */
.question-content {
  height: 400px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.question-item {
  font-size: 30px;
  font-weight: bold;
}

.question-item p {
  font-size: 40px;
  color: #000;
}

.question-item span {
  font-size: 38px;
  color: #5d5d5d;
}

/* // 修改el-dialog样式 */
:deep(.el-dialog__header) {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

:deep(.el-dialog__body) {
  padding: 30px 20px;
}
</style>
